<template>
  <el-container>
    <el-header><NavBar activeIndex="2"></NavBar></el-header>
    <el-main>
      <!-- 投资容器 -->
      <div class="invest-container">
        <!-- 卡片容器 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>理财购买</span>
          </div>
          <!-- 主体内容区 -->
          <div class="body-box">
            <!-- 理财产品容器 -->
            <div class="product-box">
              <div
                class="product-item"
                v-for="(item, index) in productList"
                :key="index"
                @click="selectPro(index)"
                :class="{ selectedStyle: curProIndex == index }"
              >
                <div class="pro-title">{{ item.productName }}</div>
                <div class="pro-img">
                  <el-image
                    :src="require(`@/assets/invest/${index + 1}.jpg`)"
                  ></el-image>
                </div>
                <div class="pro-desc">{{ proDescList[index] }}</div>
              </div>
            </div>
            <!-- 理财购买配置容器 -->
            <div class="plan-box">
              <el-card class="box-card">
                <el-table
                  :show-header="false"
                  :data="tableData"
                  border
                  style="width: 100%"
                >
                  <el-table-column prop="date" label="日期" width="180">
                  </el-table-column>
                  <el-table-column prop="name" label="姓名">
                    <template slot-scope="scope">
                      <div v-if="scope.$index === 0">
                        <el-input-number
                          @change="onAmountChange"
                          v-model="amount"
                          :step="100"
                          :min="curProduct.proLowerInvest"
                        ></el-input-number
                        >元
                      </div>
                      <div v-if="scope.$index === 1">
                        <el-slider
                          :step="6"
                          @change="onMonthChange"
                          :min="curProduct.minLimit"
                          :max="curProduct.maxLimit"
                          v-model="month"
                        ></el-slider>
                      </div>
                      <div v-if="scope.$index === 2">{{ yearRate }}%</div>
                      <div v-if="scope.$index === 3">{{ monthIncome }}元</div>
                      <div v-if="scope.$index === 4">{{ settingResults }}</div>
                      <div v-if="scope.$index === 5">
                        <el-button
                          :disabled="!checked"
                          @click="onBuyBtn"
                          type="success"
                          round
                          >购买</el-button
                        >
                        <el-checkbox v-model="checked" class="check-box"
                          >我同意</el-checkbox
                        >
                        <el-button
                          @click="drawer = true"
                          type="text"
                          style="margin-left: 16px"
                        >
                          出借条款
                        </el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </div>
        </el-card>
      </div>
    </el-main>
    <el-drawer title="出借条款" :visible.sync="drawer">
      <span
        >尊敬的客户：为了维护您的权益，请在签署本协议前，仔细阅读本协议各条款（特别是黑体字条款），充分了解银行理财业务的运作规则、协议双方的权利、
        义务和责任。如有疑问，可向银行理财产品发售机构咨询。
        一、定义。本协议项下的理财产品：是指乙方 （天津银行） 接受甲方 （客户）
        的理财申请，代理甲方将其人民币理财资金投资于理财产品说明书中指定
        的投资计划。乙方在产品实际到期日，按投资收益情况和协议约定向甲方支付人民币收益的产品。理财资金账户：指客户在代理机构开立的活期账户。理财产品
        说明书：指对理财产品投资范围、投资资产种类和各投资资产种类的投资比例，并确保在理财产品存续期间按照销售文件的约定。客户权益须知：指客户购买理
        财产品的流程、客户风险承受能力评估流程、信息披露的方式、渠道和频率、客户投诉的方式和程序的相关约定。其他事项以理财产品说明书为准。
        二、协议的构成和效力。投资人所认购／申购产品的理财协议书、产品说明书、风险揭示书及客户权益须知、个人客户投资（投保）风险承受能力评估问卷
        等有关法律文件共同构成一份完整且不可分割的理财合同。
        三、双方的声明和保证。天津银行将理财客户划分为保守型、谨慎型、稳健型、进取型、激进型客户，并在理财产品销售文件中标明所适合的客户类别。投
        资人保证自己为符合理财产品销售适用性原则的合格投资者，能够自行识别、判断和承担理财产品的相关风险；不存在法律法规、有权机关或主管机关禁止或限
        制购买理财产品的各种情形，其购买理财产品的行为亦未违反其公司章程或其他文件的任何限制性规定，并熟悉理财产品类型特征及不同销售渠道的相关规定。
        天津银行保证自身具有开办理财业务的经营资质，保证以诚实信用、勤勉谨慎的原则管理和运用理财资金。
        甲、乙双方对本协议及其条款负有保密义务，除法律、法规另有规定或监管机构另有要求外，未经一方书面许可，不得向任何组织、个人提供或泄露与对方
        有关的业务资料及信息。
        四、理财产品的认购。天津银行根据理财产品特点和管理需要，对特定理财产品开放认购或预约。投资人预约成功后可优先于未预约客户认购已预约的额度，
        但投资人办理预约应遵守相关规定。
        天津银行于产品说明书列明的募集开始日起至募集结束日止受理投资人的认购，并根据法律法规变化、市场状况、资金募集情况或在出现其他可能影响理财
        产品正常运作或投资目标实现的情形时，做出暂停／恢复募集、延长募集期限、提前结束募集宣布产品成立、或者终止募集宣布募集失败的决定，并通过约定信
        息披露途径予以通知</span
      >
    </el-drawer>
    <el-dialog title="确认购买" :visible.sync="dialogTableVisible" width="30%">
      <el-card class="box-card">
        <el-table :data="gridData" border :show-header="false">
          <el-table-column
            property="date"
            label="日期"
            width="150"
          ></el-table-column>
          <el-table-column property="content" label="姓名"></el-table-column>
        </el-table>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="buyProduct">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { authLogin } from "@/utils/auth";
import NavBar from "@/components/NavBar";
export default {
  name: "Invest",
  components: {
    NavBar,
  },
  data() {
    return {
      // 确认购买提示框的表格数据
      gridData: [
        {
          date: "购买产品",
          content: "",
        },
        {
          date: "购买金额",
          content: "",
        },
        {
          date: "购买期数",
          content: "",
        },
        {
          date: "预期收益",
          content: "",
        },
        {
          date: "账户可用金额",
          content: "",
        },
        {
          date: "可抵扣金额",
          content: "",
        },
      ],
      // 确认购买提示框的控制开关
      dialogTableVisible: false,
      // 当前选择的理财产品
      curProduct: "",
      // 当前选择产品的利率表
      curProRateList: [],
      // 产品描述列表
      proDescList: [
        "整存零取 存本取息",
        "整存整取 利上滚利",
        "零存整取 积少成多",
      ],
      // 投资产品列表
      productList: [],
      // 当前选择的产品的索引
      curProIndex: 2,
      // 出借条款抽屉的开关
      drawer: false,
      // 是否同意选择框的绑定数据
      checked: false,
      // 滑块绑定的数据
      month: 12,
      // 预计年化收益率
      yearRate: 0,
      // 每月赢取的利息
      monthIncome: 0,
      // 购买的金额
      amount: 1000,
      // 配置结果
      tableData: [
        {
          date: "投资金额",
        },
        {
          date: "请选择期限(月)",
        },
        {
          date: "预计年化收益",
        },
        {
          date: "每月赢取利息",
        },
        {
          date: "配置结果",
        },
        {
          date: "",
        },
      ],
    };
  },
  methods: {
    ...mapActions({
      getProRateList: "invest/getProductRate",
      getProList: "invest/getProductList",
      buyPro: "invest/buyProduct",
      // 更新用户账户信息
      updateUserInfo: "user/getInfo",
    }),
    // 理财产品选择
    selectPro(index) {
      console.log("当前选择的理财产品的索引", index);
      this.curProIndex = index;
      this.curProduct = this.productList[index];
    },
    // 计算每月赢取的利息
    calculat_income() {
      this.monthIncome = ((this.yearRate / 100 / 12) * this.amount).toFixed(2);
    },
    // 选择月份发生改变
    onMonthChange() {
      this.yearRate = this.curProRateList[this.month].incomeRate;
      this.calculat_income();
    },
    // 当理财购买金额发生变化
    onAmountChange() {
      this.calculat_income();
    },
    // 点击购买
    onBuyBtn() {
      if (authLogin(this)) {
        this.dialogTableVisible = true;
        this.createInvestInfo();
      }
    },
    // 购买理财产品
    buyProduct() {
      if (this.accountInfo.balance < this.amount - this.showDiscount) {
        this.$message.error("账户可用余额不足");
      } else {
        var data = {
          productId: 3,
          pAmount: this.amount,
          period: this.month,
          discount: this.showDiscount,
        };
        this.buyPro(data)
          .then((res) => {
            this.updateUserInfo().then((res) => {
              console.log("更新用户账户");
            });
            this.dialogTableVisible = false;
            this.$message({
              message: "购买理财产品成功",
              type: "success",
            });
            setTimeout(() => {
              this.$router.push("/");
            }, 5000);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 生成确认购买的信息
    createInvestInfo() {
      this.gridData[0].content = this.curProduct.productName;
      this.gridData[1].content = `${this.amount}元`;
      this.gridData[2].content = `${this.month}个月`;
      this.gridData[3].content =
        `${this.month}` +
        "*" +
        `${this.monthIncome}` +
        "=" +
        `${(this.month * this.monthIncome).toFixed(2)}元`;
      this.gridData[4].content = `${this.accountInfo.balance}元`;
      this.gridData[5].content = `${this.showDiscount}元`;
    },
  },
  created() {
    this.getProList().then((res) => {
      this.productList = res;
      this.curProduct = res[this.curProIndex];
    });
    this.getProRateList({ proId: 3 }).then((res) => {
      this.curProRateList = res;
      this.yearRate = this.curProRateList[this.month].incomeRate;
      this.calculat_income();
    });
  },
  computed: {
    ...mapGetters(["accountInfo"]),
    showDiscount() {
      return this.accountInfo.discount >= 50 ? 50 : 0;
    },
    settingResults() {
      return (
        "您选择了" +
        `${this.curProduct.productName}` +
        ",加入的本金为" +
        `${this.amount}` +
        "元,投资期限为" +
        `${this.month}` +
        "个月,预期年化收益为" +
        `${this.yearRate}` +
        "%，系统将每月返还利息" +
        `${this.monthIncome}` +
        "元至您的账户，请确认购买。"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.el-main {
  background-color: #ffd101;
  .invest-container {
    padding: 20px;

    .clearfix {
      font-size: 22px;
      color: #409eff;
    }
    .body-box {
      .product-box {
        margin: 30px auto;
        display: flex;
        justify-content: space-around;
        .product-item {
          text-align: center;
          width: 150px;
          // height: 200px;
          .pro-title {
            margin-top: 15px;
            font-size: 20px;
            color: #409eff;
          }
          .pro-desc {
            margin-bottom: 15px;
          }
        }

        .selectedStyle {
          border: rgb(146, 146, 146) 1px dashed;
          box-sizing: border-box;
        }
      }
      .plan-box {
        .check-box {
          margin: 0px 10px;
        }
      }
    }
  }
}
</style>